<!DOCTYPE html>
{% load thumbnail %}
{% load crispy_forms_tags %} 

<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Rarebooks. The great books shop</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="/common/custom/bootstrap/css/bootstrap.css" rel="stylesheet">

    <link href="/common/custom/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

    <script src="/common/js/style.js" type="text/javascript"></script> 
    <script src="/common/custom/jquery/js/jquery.js"></script>
    <script src="/common/custom/bootstrap/js/bootstrap.js"></script>

    <style type="text/css">
    @media (min-width: 768px) { 
     .sb-fixed{
        position: fixed;
        } 
     }

    /* 
    input {
        max-width: 90%;
        width: 90%;
    } 


    .input-prepend {

      max-width: 100%;
      width: 100%;


    }
    .input-prepend >input {
        max-width: 70%;
        width:     70%;

    } 

    .input-prepend > .add-on  {
      max-width: 20%;


    }

    */
    body {
        padding: 0;
        margin: 0;
    } 
    .form-actions {
      background: transparent;
    }

    .nav-list > li > a {
      padding: 3px 15px;
      padding-top: 0px;
      padding-right: 15px;
      padding-bottom: 0px;
      padding-left: 15px;
    }


    .nav-list > .active > a  {
      background-color: white;
      color:            #E74545;

    }

    .nav-list > .active > a:hover, .nav-list > .active > a:focus {
       background-color: #EEE;
       color:            #E74545;
     }
    


    .nav-header {


     
      padding: 0px 15px;
      line-height: 16px;
    }
    li {
       line-height: 16px;
    }
    .well-user {
      background-color: #FAF4DE;
      
    }
    .well-search {
      background-color: #D3F2F2;
    } 
    .well-suggest {
      background-color: ;
    }


      
    </style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

    <!-- Fav and touch icons -->


  </head>

<body>

<!--NOT registered modal popup -->

<!-- Button to trigger modal -->

{% load crispy_forms_tags %}
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Логин</h3>
  </div>
  <div class="modal-body">
    <div class='container row-fluid'>
    {% include 'goodies/login_form.html' %}
    </div>
  </div>
</div>

<!--/NOT registered modal popup -->

<!--navbar_top-->
       <div class="navbar navbar-top pull-center ">
        <div class="navbar-inner">
          <ul class="nav" >
            <li><a href="#">О&nbsp;книге</a></li>
            <li><a href="#">О&nbsp;библиофильстве</a></li>
            <li><a href="#">Справочники</a></li>
            <li><a href="#">Правила</a></li>
            <li><a href="#">Оплата&nbsp;и&nbsp;доставка</a></li>
            <li><a href="#">Новости</a></li>
            <li><a href="#">Обратная связь</a></li>
            <li><a href="#">Личная страница</a></li>
            <li><a href="#">Карта сайта</a></li>

            
          </ul>
        </div>
       </div>
<!--/navbar_top-->




<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      {% block left_menu %}
      
      <a href="#" class="thumbnail">
        <img  alt="RareBooks.ru - антикварный интернет-магазин" src="/common/img/logo.gif" width='100%'>
        <img src="/common/img/zag/i_cat.gif" width='100%' alt="">
      </a>

      
      
      <ul class="nav nav-list">
       {% for i in categories %}
        {% if i.pk in active %}
          <li class="active nav-header"><a href="/{{i.pk}}/">{{i.name}}  <span class='data'>({{i.books.all.count}})</span></a></li>
         {% if i.children %}
          {% for k in i.children.all %}
            {% if k.pk in active %}
             <li class="active"><a href="/{{i.pk}}/{{k.pk}}/">{{k.name}} <span class='data'>({{k.books.all.count}})</span></a></li>
            {% else %}
             <li class=""><a href="/{{i.pk}}/{{k.pk}}/">{{k.name}} <span class='data'>({{k.books.all.count}})</span></a></li>
            {% endif %}
          {% endfor %}
         {% endif %}
        
       {% else %}
        <li class="nav-header"><a href="/{{i.pk}}/">{{i.name}} <span class='data'>({{i.books.all.count}})</span></a></li> 
       {% endif %}


       {% endfor %}


      </ul>

      <a href="#" class="thumbnail">
        <img width='100%' alt=""  src="/common/img/contacts.gif" >
      </a>

    </div>
    {% endblock left_menu %}
 
    <div class="span7">


      <div class='container-fluid'>

      {% block top_tabs %}

      <ul class="nav nav-tabs">
        {% for i in headings %}
          {%if not forloop.last %}
              <li><a href="/{{i.0}}/" class='zag2'>{{i.1}}</a></li>
          {% else %}
              <li class="active"><a href="#" class='zag2'>{{i.1}}</a></li>
          {% endif %}
        {% endfor %}
      </ul>

      {% endblock top_tabs %}



      {% block extended_search %}

      {% endblock extended_search %}


      {% block content %}

        {% include 'goodies/books_list.html' %}
      {% endblock content %}



    </div>
  </div>

    

     <div class="span3">
        <!--right content-->
        {% block login %}
        {% include 'goodies/login_form.html' %}
        {% endblock login %}





        {% block recommendation %}
        <!--recommendation-->
          <div class="accordion" id="accordion2">
            {% if recommendation %}
            {% for item in recommendation %}
            <!--element-->

            <div class="accordion-group">
              <div class="accordion-heading">
                <div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                  {% if item.shown_date %}
                  <span class='data'>{{item.shown_date}}</span> 
                  {% else %}
                  <span class='data'>{{item.real_date}}</span>
                  {% endif %} 

                  К празднику <b>{{item.name}} </b>Реккомендуем:
                </div>
              </div>
              <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">

                    {% for book in item.books.all %}
                                    
                       <div class='author'>{{book.author|truncatechars:100}}</div>
                       
                       <a href='/book_item/?book_id={{book.pk}}'>{{book.name|truncatechars:100}}</a>
                       <div class='data' >{{book.price}} руб.</div>
                       <hr>
                    {% endfor %}
                </div>
              </div>
            </div>

            <!--/element-->
          </div>
        
            {% endfor %}
          {% endif %}
          <!--/recommendation-->       
      {% endblock recommendation %}


        {% block search_form %}

        <!--search form -->
        {% include 'goodies/search_form.html' %}         
        <!--/search form -->

        {% endblock search_form %}
      </div>
    </div>
  </div>


      
<!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

</body>
</html>


